<template>
  <div>
    <!-- 上传图片 -->
     <div>
      <Upload
        :show-upload-list="false"
        :before-upload="handleBeforeUploadPic"
        :on-success="handleSuccess"
        :on-format-error="handleFormatError"
        :format="['jpg','jpeg','png']"
        :default-file-list="defaultList"
        :action="uploadUrl"
        :data = "data1"
        >
        <i-button type="ghost" icon="ios-cloud-upload-outline">上传图片</i-button>
      </Upload>
     </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'UploadImg',
  props: {
      bankId: Number,

    },
  data () {
    return {
      uploadUrl :'',
      data1:{},
      defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
    }
  },
  methods: {
    handleBeforeUploadPic(file){

      var xhr = new XMLHttpRequest();
      var data = new FormData()
      data.append("file",file)
      //post请求一定要添加请求头才行不然会报错
      let url = "/web/api/manager/upload"
      xhr.open('post', url);
      //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      xhr.send(data);
      xhr.onreadystatechange = () => {
        //5.获取响应
        if(xhr.readyState == 4 && xhr.status == 200){
        //回应的东西
          let data = (JSON.parse(xhr.response))
          console.log('data===', data)
          if(data.message === "操作成功"){
            // alert("上传图片成功");
            console.log('1111111111111', data.date.url)
            this.$emit("showParentComp",data.date.url,this.bankId)
          }else{
             alert("上传失败");
            return;
          }
        }
      }

      // console.log('tag', file)
      // this.uploadUrl = "/web/api/manager/upload"
      // this.data1={"image-file":file.name}
    },
     // 上传成功后的事件处理
    handleSuccess(file,res) {

    },
    handleFormatError (file) {
       this.$Message.success('文件 ' + file.name + ' 格式不正确');
    }
  }
}
</script>
<style lang="stylus" scoped>
.toback {
    width: 100%;
    font-size: 1.8rem;
    line-height: 2.6;
    background #358ff0
    p {
      text-align: center;
      color: #ffffff;
    }
}
</style>

